<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">注册</h3>
  </div>
  <div class="panel-body">
    <form [formGroup]="userForm" (ngSubmit)="doRegister()" class="form-horizontal" role="form" novalidate>
      <div class="form-group" [ngClass]="{'has-error': formErrors.userName }">
        <label class="col-sm-2 control-label">用户名：</label>
        <div class="col-sm-10">
          <input formControlName="userName" class="form-control" type="text">
          <div *ngIf="formErrors.userName" class="text-danger">
            {{ formErrors.userName }}
          </div>
        </div>
      </div>

      <div class="form-group" [ngClass]="{'has-error': formErrors.password }">
        <label class="col-sm-2 control-label">密码:</label>
        <div class="col-sm-10">
          <input formControlName="password" class="form-control" type="password">
          <div *ngIf="formErrors.password" class="text-danger">
            {{ formErrors.password }}
          </div>
        </div>
      </div>

      <div class="form-group" [ngClass]="{'has-error': formErrors.confirmPassword }">
        <label class="col-sm-2 control-label">确认密码:</label>
        <div class="col-sm-10">
          <input formControlName="confirmPassword" validateEqual="password" class="form-control" type="password">
          <div *ngIf="formErrors.confirmPassword" class="text-danger">
            {{ formErrors.confirmPassword }}
          </div>
        </div>
      </div>

      <div class="form-group" [ngClass]="{'has-error': formErrors.email }">
        <label class="col-sm-2 control-label">电子邮箱:</label>
        <div class="col-sm-10">
          <input formControlName="email" class="form-control" type="text">
          <div *ngIf="formErrors.email" class="text-danger">
            {{ formErrors.email }}
          </div>
        </div>
      </div>


      <div *ngIf="formErrors.formError" class="col-sm-offset-3 col-sm-8 alert alert-danger">{{ formErrors.formError }}</div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button [disabled]="userForm.invalid" type="submit" class="btn btn-success">注册</button>
        </div>
      </div>
    </form>

  </div>
</div>
